<template>
  <div class="frequent-mistakes">
    <div class="layout-container">
      <!-- 侧边栏 -->
      <!-- <div class="sidebar">
        <div class="sidebar-header">
          <h3>习题管理</h3>
        </div>
        <el-menu
          :default-active="activeMenu"
          class="sidebar-menu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="generator">
            <el-icon><Edit /></el-icon>
            <span>习题定制</span>
          </el-menu-item>
          <el-menu-item index="history">
            <el-icon><List /></el-icon>
            <span>历史记录</span>
          </el-menu-item>
          <el-menu-item index="hot">
            <el-icon><Star /></el-icon>
            <span>热点考题</span>
          </el-menu-item>
          <el-menu-item index="mistakes">
            <el-icon><Warning /></el-icon>
            <span>高频错题</span>
          </el-menu-item>
        </el-menu>
      </div> -->

      <!-- 主内容区 -->
      <div class="main-content">
        <el-card class="mistakes-card">
          <template #header>
            <div class="card-header">
              <h2>高频错题</h2>
            </div>
          </template>
          
          <!-- 筛选区域 -->
          <div class="filter-section">
            <el-form :model="filterForm" label-width="100px" inline>
              <el-form-item label="学习阶段">
                <el-select v-model="filterForm.stage" placeholder="请选择学习阶段">
                  <el-option label="小学" value="primary" />
                  <el-option label="初中" value="junior" />
                  <el-option label="高中" value="senior" />
                </el-select>
              </el-form-item>

              <el-form-item label="学科">
                <el-select v-model="filterForm.subject" placeholder="请选择学科">
                  <el-option
                    v-for="subject in availableSubjects"
                    :key="subject.value"
                    :label="subject.label"
                    :value="subject.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="错题类型">
                <el-select v-model="filterForm.mistakeType" placeholder="请选择错题类型">
                  <el-option label="概念理解错误" value="concept" />
                  <el-option label="计算错误" value="calculation" />
                  <el-option label="解题思路错误" value="thinking" />
                  <el-option label="知识点遗漏" value="knowledge" />
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button @click="handleReset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 统计信息 -->
          <div class="stats-section">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-card shadow="hover" class="stats-card">
                  <template #header>
                    <div class="stats-header">
                      <span>总错题数</span>
                      <el-icon><Warning /></el-icon>
                    </div>
                  </template>
                  <div class="stats-value">{{ stats.totalMistakes }}</div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover" class="stats-card">
                  <template #header>
                    <div class="stats-header">
                      <span>平均错误率</span>
                      <el-icon><DataLine /></el-icon>
                    </div>
                  </template>
                  <div class="stats-value">{{ stats.averageErrorRate }}%</div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover" class="stats-card">
                  <template #header>
                    <div class="stats-header">
                      <span>最常见错题类型</span>
                      <el-icon><TrendCharts /></el-icon>
                    </div>
                  </template>
                  <div class="stats-value">{{ stats.mostCommonType }}</div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover" class="stats-card">
                  <template #header>
                    <div class="stats-header">
                      <span>已掌握题目</span>
                      <el-icon><Check /></el-icon>
                    </div>
                  </template>
                  <div class="stats-value">{{ stats.masteredQuestions }}</div>
                </el-card>
              </el-col>
            </el-row>
          </div>

          <!-- 错题列表 -->
          <div class="mistakes-list">
            <el-card v-for="(mistake, index) in mistakes" :key="index" class="mistake-card">
              <template #header>
                <div class="mistake-header">
                  <span class="mistake-type">{{ getMistakeTypeLabel(mistake.type) }}</span>
                  <span class="mistake-number">第 {{ index + 1 }} 题</span>
                </div>
              </template>
              <div class="mistake-content">
                <p class="mistake-text">{{ mistake.content }}</p>
                <div v-if="mistake.options" class="mistake-options">
                  <div v-for="(option, key) in mistake.options" :key="key" class="option-item">
                    {{ key }}. {{ option }}
                  </div>
                </div>
                <div class="mistake-answer">
                  <p><strong>正确答案：</strong>{{ mistake.correctAnswer }}</p>
                  <p><strong>错误原因：</strong>{{ mistake.errorReason }}</p>
                  <p><strong>解题思路：</strong>{{ mistake.solution }}</p>
                </div>
                <div class="mistake-stats">
                  <el-tag type="danger" size="small">错误次数: {{ mistake.errorCount }}</el-tag>
                  <el-tag type="warning" size="small">错误率: {{ mistake.errorRate }}%</el-tag>
                  <el-tag type="success" size="small">掌握度: {{ mistake.masteryLevel }}%</el-tag>
                </div>
              </div>
            </el-card>
          </div>

          <!-- 分页 -->
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Edit, List, Document, Star, Warning, DataLine, TrendCharts, Check } from '@element-plus/icons-vue'
import { getFrequentMistakes } from '@/api/homework'

const router = useRouter()
const activeMenu = ref('mistakes')

const filterForm = ref({
  stage: '',
  subject: '',
  mistakeType: ''
})

const mistakes = ref([])
const stats = ref({
  totalMistakes: 0,
  averageErrorRate: 0,
  mostCommonType: '',
  masteredQuestions: 0
})
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 根据学习阶段获取可用学科
const availableSubjects = computed(() => {
  const subjects = {
    primary: [
      { label: '语文', value: 'chinese' },
      { label: '数学', value: 'math' },
      { label: '英语', value: 'english' }
    ],
    junior: [
      { label: '语文', value: 'chinese' },
      { label: '数学', value: 'math' },
      { label: '英语', value: 'english' },
      { label: '科学', value: 'science' },
      { label: '社会', value: 'society' }
    ],
    senior: [
      { label: '语文', value: 'chinese' },
      { label: '数学', value: 'math' },
      { label: '英语', value: 'english' },
      { label: '政治', value: 'political' },
      { label: '历史', value: 'history' },
      { label: '地理', value: 'geography' },
      { label: '物理', value: 'physics' },
      { label: '化学', value: 'chemistry' },
      { label: '生物', value: 'biology' }
    ]
  }
  return subjects[filterForm.value.stage] || []
})

// 获取错题类型标签
const getMistakeTypeLabel = (type) => {
  const typeMap = {
    'concept': '概念理解错误',
    'calculation': '计算错误',
    'thinking': '解题思路错误',
    'knowledge': '知识点遗漏'
  }
  return typeMap[type] || type
}

// 获取高频错题列表
const fetchMistakes = async () => {
  try {
    const params = {
      page: currentPage.value,
      pageSize: pageSize.value,
      ...filterForm.value
    }
    
    const response = await getFrequentMistakes(params)
    mistakes.value = response.data.list
    stats.value = response.data.stats
    total.value = response.data.total
  } catch (error) {
    console.error('获取高频错题失败:', error)
    ElMessage.error('获取高频错题失败')
  }
}

// 处理查询
const handleSearch = () => {
  currentPage.value = 1
  fetchMistakes()
}

// 处理重置
const handleReset = () => {
  filterForm.value = {
    stage: '',
    subject: '',
    mistakeType: ''
  }
  handleSearch()
}

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchMistakes()
}

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchMistakes()
}

// 处理菜单选择
const handleMenuSelect = (index) => {
  activeMenu.value = index
  switch (index) {
    case 'generator':
      router.push('/homework/generator')
      break
    case 'history':
      router.push('/homework/history')
      break
    case 'hot':
      router.push('/homework/hot')
      break
    case 'mistakes':
      router.push('/homework/mistakes')
      break
    default:
      break
  }
}

onMounted(() => {
  fetchMistakes()
})
</script>

<style scoped>
.frequent-mistakes {
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
  margin-top: 60px;
}

.layout-container {
  display: flex;
  gap: 20px;
  min-height: calc(100vh - 100px);
}

.sidebar {
  width: 240px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 80px;
  height: calc(100vh - 100px);
  overflow-y: auto;
}

.sidebar-header {
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.sidebar-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
  font-weight: 600;
}

.sidebar-menu {
  border-right: none;
}

.main-content {
  flex: 1;
  min-width: 0;
}

.mistakes-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
  font-weight: 600;
}

.filter-section {
  margin-bottom: 20px;
}

.stats-section {
  margin-bottom: 20px;
}

.stats-card {
  height: 120px;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stats-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  text-align: center;
  margin-top: 10px;
}

.mistakes-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mistake-card {
  margin-bottom: 20px;
}

.mistake-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mistake-type {
  color: #409eff;
  font-weight: 500;
}

.mistake-number {
  color: #909399;
}

.mistake-content {
  line-height: 1.6;
}

.mistake-text {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #303133;
}

.mistake-options {
  margin: 15px 0;
}

.option-item {
  margin: 8px 0;
  color: #606266;
}

.mistake-answer {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}

.mistake-answer p {
  margin: 8px 0;
  color: #606266;
}

.mistake-stats {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style> 